<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空调控温</title>
    <link rel="stylesheet" href="../css/theme.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/aircondition.css" />
    <link rel="stylesheet" href="../css/iconfont.css" />
    <link rel="stylesheet" href="../css/iconfont.ttf" />
    <link rel="stylesheet" href="../layui-v2.8.17/layui/css/layui.css" />
    <!-- 先加载基础库 -->
    <script src="../lib/jquery.js"></script>
    <script src="../lib/utils.js"></script>
    <script src="../layui-v2.8.17/layui/layui.js"></script>
    <script src="../lib/echarts.min.js"></script>
    <!-- 加载公共组件 -->
    <script src="../js/common.js"></script>
  <script src="../js/widgets.js"></script>
    <!-- 加载调试工具 -->
    <script src="../lib/vconsole/vconsole.min.js"></script>
    <script src="../js/vconsole-init.js"></script>
    <!-- 加载接口和工具 -->
    <script src="../js/android-interface.js"></script>
    <script src="../js/warom-utils.js"></script>
    
    <script>
      // 全局函数，用于打开温度设置弹窗
      function openTempSettingModal(cardId, currentTemp) {
        console.log("内联函数被调用，卡片ID:", cardId, "当前温度:", currentTemp);
        
        if (typeof showFormModal !== 'function') {
          console.error("showFormModal函数未定义");
          alert("页面功能加载不完整，请刷新页面");
          return;
        }
        
        showFormModal({
          title: `设置${cardId}#空调目标温度`,
          fields: [
            {
              name: 'targetTemp',
              label: '目标温度 (16-30℃)',
              type: 'number',
              value: currentTemp,
              required: true,
            }
          ],
          submitText: '确定',
          cancelText: '取消',
          onSubmit: function(formData) {
            let newTemp = parseInt(formData.targetTemp);
            if (!isNaN(newTemp)) {
              if (newTemp > 30) {
                newTemp = 30;
                showToast('温度最高只能设置为30℃', 'warning');
              } else if (newTemp < 16) {
                newTemp = 16;
                showToast('温度最低只能设置为16℃', 'warning');
              }
              
              // 更新对应卡片的温度值
              $(`.air-conditioner-card[data-id="${cardId}"] .target-temp`).text(newTemp);
              showToast(`${cardId}#空调目标温度已设置为 ${newTemp}℃`, 'success');
            }
            closeModal();
          }
        });
      }
    </script>
  </head>
  <body>
    <!-- 公共头部 -->
    <header class="common-header"></header>
    
    <main>
      <!-- 1#空调 -->
      <div class="air-conditioner-card" data-id="1">
        <div class="card-header">
          <div class="device-name">1#空调</div>
          <div class="device-status status-normal">状态: 正常</div>
        </div>
        <div class="card-content">
          <div class="mode-section">
            <div class="mode-row">
              <div class="mode-name">
                运行模式
              </div>
              <div class="mode-value" data-mode="auto">自动模式</div>
            </div>
            <div class="mode-row">
              <div class="mode-name">
                系统状态
              </div>
              <div class="mode-value system-status">关机</div>
            </div>
          </div>
          
          <div class="temperature-control">
            <div class="temperature-info">
              <div class="temperature-label">目标温度</div>
              <div class="temperature-value" style="cursor: pointer;" onclick="openTempSettingModal(1, document.querySelector('.air-conditioner-card[data-id=\'1\'] .target-temp').textContent)">
                <span class="target-temp">10</span>
                <span class="temperature-unit">℃</span>
              </div>
            </div>
            <div class="temperature-info">
              <div class="temperature-label">室内温度</div>
              <div class="temperature-value">
                <span class="current-temp">25</span>
                <span class="temperature-unit">℃</span>
              </div>
            </div>
          </div>
          
          <div class="control-buttons">
            <button class="control-button mode-btn" data-mode="auto">自动</button>
            <button class="control-button mode-btn" data-mode="cooling">制冷</button>
            <button class="control-button mode-btn" data-mode="dehumidify">除湿</button>
            <button class="control-button power-btn" data-status="off">开启</button>
          </div>
        </div>
      </div>
      
      <!-- 2#空调 -->
      <div class="air-conditioner-card" data-id="2">
        <div class="card-header">
          <div class="device-name">2#空调</div>
          <div class="device-status status-normal">状态: 正常</div>
        </div>
        <div class="card-content">
          <div class="mode-section">
            <div class="mode-row">
              <div class="mode-name">
                运行模式
              </div>
              <div class="mode-value" data-mode="auto">自动模式</div>
            </div>
            <div class="mode-row">
              <div class="mode-name">
                系统状态
              </div>
              <div class="mode-value system-status">关机</div>
            </div>
          </div>
          
          <div class="temperature-control">
            <div class="temperature-info">
              <div class="temperature-label">目标温度</div>
              <div class="temperature-value" style="cursor: pointer;" onclick="openTempSettingModal(2, document.querySelector('.air-conditioner-card[data-id=\'2\'] .target-temp').textContent)">
                <span class="target-temp">10</span>
                <span class="temperature-unit">℃</span>
              </div>
            </div>
            <div class="temperature-info">
              <div class="temperature-label">室内温度</div>
              <div class="temperature-value">
                <span class="current-temp">25</span>
                <span class="temperature-unit">℃</span>
              </div>
            </div>
          </div>
          
          <div class="control-buttons">
            <button class="control-button mode-btn" data-mode="auto">自动</button>
            <button class="control-button mode-btn" data-mode="cooling">制冷</button>
            <button class="control-button mode-btn" data-mode="dehumidify">除湿</button>
            <button class="control-button power-btn" data-status="off">开启</button>
          </div>
        </div>
      </div>
      
      <!-- 3#空调 -->
      <div class="air-conditioner-card" data-id="3">
        <div class="card-header">
          <div class="device-name">3#空调</div>
          <div class="device-status status-normal">状态: 正常</div>
        </div>
        <div class="card-content">
          <div class="mode-section">
            <div class="mode-row">
              <div class="mode-name">
                运行模式
              </div>
              <div class="mode-value" data-mode="auto">自动模式</div>
            </div>
            <div class="mode-row">
              <div class="mode-name">
                系统状态
              </div>
              <div class="mode-value system-status">关机</div>
            </div>
          </div>
          
          <div class="temperature-control">
            <div class="temperature-info">
              <div class="temperature-label">目标温度</div>
              <div class="temperature-value" style="cursor: pointer;" onclick="openTempSettingModal(3, document.querySelector('.air-conditioner-card[data-id=\'3\'] .target-temp').textContent)">
                <span class="target-temp">10</span>
                <span class="temperature-unit">℃</span>
              </div>
            </div>
            <div class="temperature-info">
              <div class="temperature-label">室内温度</div>
              <div class="temperature-value">
                <span class="current-temp">25</span>
                <span class="temperature-unit">℃</span>
              </div>
            </div>
          </div>
          
          <div class="control-buttons">
            <button class="control-button mode-btn" data-mode="auto">自动</button>
            <button class="control-button mode-btn" data-mode="cooling">制冷</button>
            <button class="control-button mode-btn" data-mode="dehumidify">除湿</button>
            <button class="control-button power-btn" data-status="off">开启</button>
          </div>
        </div>
      </div>
      
      <!-- 4#空调 -->
      <div class="air-conditioner-card" data-id="4">
        <div class="card-header">
          <div class="device-name">4#空调</div>
          <div class="device-status status-normal">状态: 正常</div>
        </div>
        <div class="card-content">
          <div class="mode-section">
            <div class="mode-row">
              <div class="mode-name">
                运行模式
              </div>
              <div class="mode-value" data-mode="auto">自动模式</div>
            </div>
            <div class="mode-row">
              <div class="mode-name">
                系统状态
              </div>
              <div class="mode-value system-status">关机</div>
            </div>
          </div>
          
          <div class="temperature-control">
            <div class="temperature-info">
              <div class="temperature-label">目标温度</div>
              <div class="temperature-value" style="cursor: pointer;" onclick="openTempSettingModal(4, document.querySelector('.air-conditioner-card[data-id=\'4\'] .target-temp').textContent)">
                <span class="target-temp">10</span>
                <span class="temperature-unit">℃</span>
              </div>
            </div>
            <div class="temperature-info">
              <div class="temperature-label">室内温度</div>
              <div class="temperature-value">
                <span class="current-temp">25</span>
                <span class="temperature-unit">℃</span>
              </div>
            </div>
          </div>
          
          <div class="control-buttons">
            <button class="control-button mode-btn" data-mode="auto">自动</button>
            <button class="control-button mode-btn" data-mode="cooling">制冷</button>
            <button class="control-button mode-btn" data-mode="dehumidify">除湿</button>
            <button class="control-button power-btn" data-status="off">开启</button>
          </div>
        </div>
      </div>
      
      <!-- 5#空调 -->
      <div class="air-conditioner-card" data-id="5">
        <div class="card-header">
          <div class="device-name">5#空调</div>
          <div class="device-status status-normal">状态: 正常</div>
        </div>
        <div class="card-content">
          <div class="mode-section">
            <div class="mode-row">
              <div class="mode-name">
                运行模式
              </div>
              <div class="mode-value" data-mode="auto">自动模式</div>
            </div>
            <div class="mode-row">
              <div class="mode-name">
                系统状态
              </div>
              <div class="mode-value system-status">关机</div>
            </div>
          </div>
          
          <div class="temperature-control">
            <div class="temperature-info">
              <div class="temperature-label">目标温度</div>
              <div class="temperature-value" style="cursor: pointer;" onclick="openTempSettingModal(5, document.querySelector('.air-conditioner-card[data-id=\'5\'] .target-temp').textContent)">
                <span class="target-temp">10</span>
                <span class="temperature-unit">℃</span>
              </div>
            </div>
            <div class="temperature-info">
              <div class="temperature-label">室内温度</div>
              <div class="temperature-value">
                <span class="current-temp">25</span>
                <span class="temperature-unit">℃</span>
              </div>
            </div>
          </div>
          
          <div class="control-buttons">
            <button class="control-button mode-btn" data-mode="auto">自动</button>
            <button class="control-button mode-btn" data-mode="cooling">制冷</button>
            <button class="control-button mode-btn" data-mode="dehumidify">除湿</button>
            <button class="control-button power-btn" data-status="off">开启</button>
          </div>
        </div>
      </div>
      
      <!-- 6#空调 -->
      <div class="air-conditioner-card" data-id="6">
        <div class="card-header">
          <div class="device-name">6#空调</div>
          <div class="device-status status-normal">状态: 正常</div>
        </div>
        <div class="card-content">
          <div class="mode-section">
            <div class="mode-row">
              <div class="mode-name">
                运行模式
              </div>
              <div class="mode-value" data-mode="auto">自动模式</div>
            </div>
            <div class="mode-row">
              <div class="mode-name">
                系统状态
              </div>
              <div class="mode-value system-status">关机</div>
            </div>
          </div>
          
          <div class="temperature-control">
            <div class="temperature-info">
              <div class="temperature-label">目标温度</div>
              <div class="temperature-value" style="cursor: pointer;" onclick="openTempSettingModal(6, document.querySelector('.air-conditioner-card[data-id=\'6\'] .target-temp').textContent)">
                <span class="target-temp">10</span>
                <span class="temperature-unit">℃</span>
              </div>
            </div>
            <div class="temperature-info">
              <div class="temperature-label">室内温度</div>
              <div class="temperature-value">
                <span class="current-temp">25</span>
                <span class="temperature-unit">℃</span>
              </div>
            </div>
          </div>
          
          <div class="control-buttons">
            <button class="control-button mode-btn" data-mode="auto">自动</button>
            <button class="control-button mode-btn" data-mode="cooling">制冷</button>
            <button class="control-button mode-btn" data-mode="dehumidify">除湿</button>
            <button class="control-button power-btn" data-status="off">开启</button>
          </div>
        </div>
      </div>
      
      <!-- 自动刷新指示器 -->
      <div class="auto-refresh" style="display: none;">数据自动刷新中...</div>
    </main>
    
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        // 加载保存的主题
        loadSavedTheme();
        
        // 初始化公共头部
        initCommonHeader('空调控温', true);
      });
    </script>
    <!-- 最后加载页面特定的JS -->
    <script src="../js/aircondition.js"></script>
  </body>
</html>
